<template>
  <div class="content">
    <div class="order">
      <div class="status">状态：<span>待接单</span></div>

      <div class="flex-row-start-start">
        <div class="title">订单号：</div>
        <div class="desc">{{ order.nu }}</div>
      </div>

      <div class="flex-row-start-start">
        <div class="title">姓名：</div>
        <div class="desc">{{ order.name }}</div>
      </div>

      <div class="flex-row-start-start">
        <div class="title">联系方式：</div>
        <div class="desc" @click="callPhone">{{ order.mobile }}</div>
      </div>

      <div class="flex-row-start-start">
        <div class="title">回收地址：</div>
        <div class="desc">{{ order.address }}</div>
      </div>

      <div class="flex-row-start-start">
        <div class="title">预约时间：</div>
        <div class="desc">{{ order.time }}</div>
      </div>

      <div class="flex-row-start-start">
        <div class="title">重量：</div>
        <div class="desc">{{ order.weight }}</div>
      </div>

      <div class="flex-row-start-start">
        <div class="title">备注：</div>
        <div class="desc">{{ order.describe }}</div>
      </div>

      <div class="flex-row-start-start">
        <div class="title">照片：</div>
        <div class="images flex-row-start-start" style="margin: 0;">
          <img v-for="(item,index) in order.img" :key="index + 'oney'" :src="base + item">
        </div>
      </div>
    </div>

    <!-- 选择价格 -->
    <div class="choose-price flex-row-space-between">
      <div class="title">选择价格：</div>
      <div class="flex-row-end" @click="choosePrice">
        <div>{{ typedesc }}</div>
        <img src="@/assets/icon/jiantou.png" alt="">
      </div>
    </div>

    <!-- 输入重量 -->
    <div class="choose-price flex-row-space-between">
      <div class="title">输入重量：</div>
      <div class="flex-row-end">
        <input v-model="weight" type="number" placeholder="请输入重量">kg
      </div>
    </div>

    <div class="submit">
      <div class="btn-success" @click="submitOrder">提交审核</div>
    </div>

    <van-overlay :show="show" @click="show = false">
      <div v-show="show" class="submit">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
        />
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { Picker, Overlay, Toast } from 'vant'
import { getPrice, getOrderDetail, submit } from '../../api/apis'
import { getToken } from '@/utils/auth'
export default {
  components: {
    [Picker.name]: Picker,
    [Overlay.name]: Overlay
  },

  data() {
    return {
      base: 'https://tp.tcaizy.cn',
      id: '',
      type: '',
      typedesc: '',
      weight: '',
      columns: [],
      show: false,
      order: {},
      isSubmit: false
    }
  },

  mounted() {
    if (getToken()) {
      this.getPrice()
      this.getOrderDetail()
    } else {
      this.$router.push({
        path: '/login'
      })
    }
  },

  methods: {
    callPhone() {
      window.location.href = 'tel://' + this.order.mobile
    },

    choosePrice() {
      this.show = true
    },

    onConfirm(value) {
      this.type = value.id
      this.typedesc = value.text
    },

    getPrice() {
      getPrice().then(res => {
        for (const item of res.data) {
          const ii = {
            id: item.id,
            text: item.name + ' ' + item.price + '元/' + item.unit
          }
          this.columns.push(ii)
        }
        this.type = this.columns[0].id
        this.typedesc = this.columns[0].text
      })
    },

    getOrderDetail() {
      const id = this.$route.query.id
      this.id = id
      getOrderDetail(id).then(res => {
        console.log('订单详情', res)
        this.order = res.data
        this.type = this.order.categoryId
        for (const item of this.columns) {
          if (this.type === item.id) {
            this.typedesc = item.text
          }
        }
      })
    },

    submitOrder() {
      if (this.weight <= 0) {
        Toast('重量不能小于0')
        return
      }
      if (!this.isSubmit) {
        submit(this.id, this.type, this.weight).then(res => {
          Toast('提交审核成功')

          setTimeout(() => {
            this.$router.go(-1)
          }, 1500)
        })
        this.isSubmit = true
      }
    }
  }
}
</script>

<style scoped>
body {
  font-size: 36px;
  color: #444444;
}

.content{
  padding: 20px;
}

.order {
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  line-height: 1.6;
}
.status {
  padding: 30px;
  border-bottom: 1px solid #f4f6fa;
  margin-bottom: 20px;
  font-weight: bold;
}
.status span {
  color: #5edb87;
}
.order .flex-row-start-start {
  margin: 30px 0;
}

.title {
  font-weight: bold;
  min-width: 190px;
  text-align: right;
  margin-right: 20px;
}

.desc {
  color: #888888;
}

.choose-price {
  padding: 30px;
  background-color: #fff;
  margin: 20px 0;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
.choose-price img {
  height: 40px;
  width: 25px;
  margin-left: 34px;
}

.choose-price .flex-row-end {
  color: #f88437;
}

input {
  border: none;
  outline: none;
  background: transparent;
  text-align: right;
  margin-right: 30px;
  font-size: 36px;
}
input:focus {
  border: none;
}

.submit {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;

  box-sizing: content-box;
}
.submit .btn-success {
  margin: 20px;
  font-size: 36px;
}

.images img {
  height: 150px;
  width: 150px;
  margin-right: 30px;
}
</style>
